import {useState} from 'react';
import { NavBar, Space, Toast, Radio } from "antd-mobile";
import { CheckOutline, RightOutline, FrownOutline } from "antd-mobile-icons";
import {useLocation,useHistory} from "react-router-dom"
import {useSelector,useDispatch} from "react-redux"
import {SHOW_TABBER,SWITCH_TABBER} from "../store/action-type/tabber"
import "../MIUIcss/tijiao.scss"

function Playresolvd() {
    const { state } = useLocation()
    const dispatch =useDispatch()
    const {push} =useHistory()
    const [value,setValue] =useState('one')
    let {order} =useSelector(store=>store)
    
    order=order.find(item=>item.id==state.id)
    console.log(order, state);
    const [is, setIs] = useState(order.is)
  return (
    <div className="playResolvd">
      <NavBar
        back={"返回"}
        className="resolvdNav"
        style={{ backgroundColor: `#${is ? "a4c859" : "e24747"}` }}
        onBack={() => {
          dispatch({ type: SHOW_TABBER });
          dispatch({ type: SWITCH_TABBER, index: 0 });
          push("/");
        }}
      />
      <section
        className="resolvdTop"
        style={{ backgroundColor: `#${is ? "a4c859" : "e24747"}` }}
      >
        <span>{is ? <CheckOutline /> : <FrownOutline />}</span>
        <span>{is ? "付款成功" : "付款失败"}</span>
      </section>
      <div className="xiangq">
        <p>
          <span>订单编号</span>
          <span>{order.orderNumber}</span>
        </p>
        <p>
          <span>{is ? "实付" : "应付"}金额</span>
          <span>{order.money}元</span>
        </p>
      </div>
      <div className="tost" style={{ display: is ? "" : "none" }}>
        <a href="">请谨防诈骗电话</a>
        <RightOutline className="rightjiant" />
      </div>
      <div className="palyMethod" style={{ display: is ? "none" : "" }}>
        <div className="tost">支付遇到问题，请再次选择方式支付</div>
        <ul>
          <Radio.Group
            value={value}
            onChange={(l) => {
              setValue(l);
            }}
          >
            <li>
              <span>xx支付</span>
              <span>享受xx活动</span>
              <Radio value="one" className="palyCk" />
            </li>
            <li>
              <span>xx支付</span>
              <span>享受xx活动</span>
              <Radio value="two" className="palyCk" />
            </li>

            <li>
              <span>xx支付</span>
              <span>享受xx活动</span>
              <Radio value="therr" className="palyCk" />
            </li>
            <li>
              <span>xx支付</span>
              <span>享受xx活动</span>
              <Radio value="fuor" className="palyCk" />
            </li>
            <li>
              <span>xx支付</span>
              <span>享受xx活动</span>
              <Radio value="five" className="palyCk" />
            </li>
          </Radio.Group>
        </ul>
      </div>
      <div className="returnHome">
        <div
        onClick={()=>{
            if(is){
                push({ pathname: "/Cart/detail",state:{data:order} });
            }
        }}
        >{is ? "查看订单" : "联系客服"}</div>
        <div
          style={{
            backgroundColor: `#${is ? "" : "ff703a"}`,
            color: `#${is ? "" : "fff"}`,
          }}
          onClick={() => {
              if(is){
                dispatch({ type: SHOW_TABBER });
                dispatch({ type: SWITCH_TABBER, index: 0 });
                push("/");
              }else{
                  push({
                    pathname: "/cart/play",
                    state: { id: state.id },
                  });
              }
            
          }}
        >
          {is ? "回到首页" : "立即付款"}
        </div>
      </div>
    </div>
  );
}

export default Playresolvd;
